<template>
  <div class="main-page">

    <div class="header">
      <span class="header-data-span">这里是首页</span>
    </div>
    <el-row :gutter="20">
      <el-col :span="8">
        <div class="card">
          <el-row :gutter="40">
            <el-col :span="10">
              <el-image style="width: 100%; height: 100%" :src="require('@/assets/948f8.jpg')" fit="fill"></el-image>
            </el-col>
            <el-col :span="12">
              <span>SQL语法转换器</span>
              <br><br>
              <span>这个小工具可以帮助你实现DB2或者Hive的语法转为PostgreSQL语法，现在还有很多问题，需要重构</span>
            </el-col>
          </el-row>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="card">
          <el-row :gutter="40">
            <el-col :span="10">
              <el-image style="width: 100%; height: 100%" :src="require('@/assets/kanban.jpg')" fit="fill"></el-image>
            </el-col>
            <el-col :span="12">
              <span>小小看板</span>
              <br><br>
              <span>把需要控制的进度记录进来吧</span>
            </el-col>
          </el-row>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="card">
          <el-row :gutter="40">
            <el-col :span="10">
              <!-- <el-image style="width: 100%; height: 100%" :src="require('@/assets/history-list.jpg')" fit="fill"></el-image> -->
              <div class="pic-item">
                <img class="img" src="../../assets/history-list.jpg" alt="fff">
              </div>
            </el-col>
            <el-col :span="12">
              <span>更新历史记录</span>
              <br><br>
              <span>这里记录每次更新的具体内容</span>
            </el-col>
          </el-row>
        </div>
      </el-col>
    </el-row>

  </div>
</template>

<script>
import MyHeader from '../myHeader/myHeader.vue';
export default {
    components: { MyHeader }
}
</script>

<style>
.main-page {
  margin: 0px;
  padding: 0px;
  text-align: center;
}

.pic-item {
  width: 200px;
  height: 200px;
}

.img {
  width: 100%;
  height: 100%;
}

.el-main {
  padding: 0px;
  margin: 0px;
}

.header {
  width: 100%;
  height: 50px;
  margin-top: 35px;
  padding-top: 35px;
  padding-bottom: 35px;
  background-size: 100% 100% !important;
  background-image: url(../../assets/63a76.png);
}

.header-data-span {
  font-size: 25px;
  line-height: 50px;
  font-weight: 700;
  color: #FFFF;
}

.card {
  padding-top: 100px;
  padding-bottom: 30px;
  padding-left: 25px;
  padding-right: 25px;
  /* background-color: aquamarine; */
}
.card span {
  float: left;
}
</style>